.configure-wrap {
    margin: 0 auto;
    margin-bottom: 5px;
    position: relative;
}

.configure {
    background: white;

    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.1);

    border-radius: 4px;
    overflow: hidden;

    -webkit-app-region: no-drag;

    h1 {
        font-weight: 100;
        padding: 24px;
    }

    .rc-tabs-left {
        border-right: 0;
        overflow-y: hidden;
        padding: 10px 0;
    }

    .rc-tabs-content .rc-tabs-tabpane {
        overflow: auto;
        padding: 20px;
    }

    .rc-tabs-left .rc-tabs-tab {
        padding: 12px 24px;
    }

    .banner {
        padding: 20px;
        color: white;
        display: flex;
        // margin-bottom: 20px;

        transition: background 0.4s linear;

        &.connected { background: #609860; }
        &.unconfigured { background: #656565; }
        &.connecting { background: #106ba3; }
        &.disconnected { background: #9c0000; }

        &.can-toggle { cursor: pointer; }

        .body { flex: 1; }
        .toggle {
            user-select: none;
            cursor: pointer;
        }
    }
}

.configure >.ReactCollapse--collapse > .ReactCollapse--content {
    border: 1px solid #d8d8d8;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}


.open-thumb {
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    margin-right: 10px;
    padding: 10px 15px ;
    display: inline-block;
    user-select: none;
    cursor: pointer;
    transition: all 0.1s linear;
}



.sample-thumb {
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 140px;
    height: 100px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    background-size: cover;
    user-select: none;
    cursor: pointer;
    transition: all 0.1s linear;
}


@media (max-width: 700px) {
    .configure .rc-tabs-bar {
        display: none;
    }
}

.open-thumb:hover, .sample-thumb:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.sample-thumb .title {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}



// this is a hack that fixes a visual glitch on the file upload button
.pt-file-upload-input::after {
    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1);
}


.pg-form {
  .pt-control-group {
    margin-bottom: 10px;
  }
  .ReactCollapse--content {
    padding: 10px 0;
  }
  .pt-button {
    margin-top: 10px;
  }
}

